<template>
  <div v-loading="loading" class="baidu-view">
    <!-- 地图 -->
    <div v-if="!hasBmView" ref="baiduView"  style="width: 100%; height: 100%">
    </div>
  </div>
</template>

<script>
import themeData from './custom_map_config.json'
import moment from "moment";

export default {
  name:'baidumap',
  data() {
    return {
      loading:false,
      map:'',
      hasBmView: false,
      lightErr:require('./icon/lightErr.svg'),
      lightNor:require('./icon/lightNor.svg'),
      pressureErr:require('./icon/pressureErr.svg'),
      pressureNor:require('./icon/pressureNor.svg'),
      temperatureErr:require('./icon/temperatureErr.svg'),
      temperatureNor:require('./icon/temperatureNor.svg'),
    }
  },
  props:{
    shouMapText:{
      type:Boolean,
      default:false
    },
    pointData:{
      type:Array,
      default(){
        return []
      },
    },
    editPoint:{
      type:Object,
      default(){
        return {
          longitude:'',
          latitude:'',
        }
      },
    },
  },
  watch:{
    pointData(){
      this.setMarker()
    },
    editPoint(newV){
      this.setDefaultPoint()
    },
  },
  created() {
  },
  mounted(){
    this.createBDmap()
  },
  methods:{
    //初始化地图方法
    createBDmap() {
      if (this.map) {
        return
      }
      let $el = this.$refs.baiduView
      for (let $node of this.$slots.default || []) {
        if ($node.componentOptions && $node.componentOptions.tag === 'bm-view') {
          this.hasBmView = true
          $el = $node.elm
        }
      }
      var map = new BMapGL.Map($el, { enableMapClick: false }); // 创建Map实例,
      var point = new BMapGL.Point(106.24554, 38.51935)

      setTimeout(()=>{
        map.centerAndZoom(point, 18); // 初始化地图,设置中心点坐标和地图级别
        map.disableDragging() //禁用拖动
        map.disableDoubleClickZoom() //禁用双击缩放
        if(!this.shouMapText){
          map.setMapStyleV2({
            styleId: '74e96de21dadf6adf1bcbca1c644c14f'
          });
        }
        map.addEventListener('click', (e)=>{
          this.getPosition(e)
        });
        map.addEventListener('tilesloaded', ()=> {
          this.loading=false
        });
        this.map = map
        this.setMarker()
        this.setDefaultPoint()
      },1000)
    },
    //获取经纬度
    getPosition(data){
      let positionData=data.latlng
      this.$emit('getPosition',positionData)
      if(this.shouMapText){
        this.setCurrentPoint(positionData)
      }
    },
    setMarker(){
      if(!this.map){
        return
      }
      this.clearOverlays()
      this.pointData.map(item=>{
        if(item.longitude && item.latitude){
          // var customOverlay = new BMapGL.CustomOverlay(this.createDOM, {
          //   point: new BMapGL.Point(item.longitude, item.latitude),
          //   // opacity: 0.5,
          //   // offsetY: -10,
          //   properties: item
          // });
          // this.map.addOverlay(customOverlay);
          const myIcon = new BMapGL.Icon(this.getIcon(item), new BMapGL.Size(20, 20));
          const point = new BMapGL.Point(item.longitude, item.latitude);
          const marker = new BMapGL.Marker(point, {
            icon: myIcon
          });
          this.map.addOverlay(marker);
          const opts = {
            width: 300,
            height: 130,
            title: '设备信息'
          };
          // 创建图文信息窗口
          var sContent = `<div>
               <div>设备编号：${item.deviceId}</div>
               <div>设备类型：${item.type}</div>
               <div>安装地址：${item.location}</div>
               <div>设备状态：${item.status}</div>
               </div>`;
          const infoWindow = new BMapGL.InfoWindow(sContent, opts);
          marker.addEventListener('click',()=> {
            this.map.openInfoWindow(infoWindow, point); // 开启信息窗口
          });
        }
      })
    },
    getIcon(item){
      if(item.type==='水压监测设备'  ){
        if(item.status==='运行中'){
          return this.pressureNor
        }else{
          return this.pressureErr
        }
      }
      if(item.type==='水温监测设备'  ){
        if(item.status==='运行中'){
          return this.temperatureNor
        }else{
          return this.temperatureErr
        }
      }
      if(item.type==='智能照明设备'  ){
        if(item.status==='运行中'){
          return this.lightNor
        }else{
          return this.lightErr
        }
      }
    },
    setCurrentPoint(data){
      this.clearOverlays()
      var point = new BMapGL.Point(data.lng, data.lat);//默认展示地点
      var marker = new BMapGL.Marker(point);          // 将图标和坐标进行关联
      this.map.addOverlay(marker);
    },
    setDefaultPoint(){
      if(this.editPoint.longitude && this.editPoint.latitude){
        let positionData={
          lng:this.editPoint.longitude,
          lat:this.editPoint.latitude
        }
        this.setCurrentPoint(positionData)
      }
    },
    clearOverlays(){
      if(this.map){
        let allArray = this.map.getOverlays()//获取所有makers
        this.map.clearOverlays(allArray[0])
      }
    },
  },

}
</script>

<style>
.baidu-view{

  width: 700px;
  height: 800px;
}
.anchorBL,
 .anchorTR,
 .BMap_zlHolder,
[id^=PanoramaFlashWraperTANGRAM] {
  display: none;
  visibility: hidden;
}
.pointView{

}
.pointIcon{
  width: 30px;
  height: 30px;
}
.deviceIcon{
  position: absolute;
  left: 5px;
  top: -20px;
  width: 30px;
  height: 30px;
}
</style>
